import type { Size } from '@/plugins/element'

export const useAppStore = defineStore(
  'app',
  () => {
    const state = reactive({
      sidebar: {
        opened: true,
        withoutAnimation: false
      },
      size: 'default' as Size,
      device: 'desktop'
    })

    const sidebar = computed(() => state.sidebar)

    const toggleSideBar = () => {
      state.sidebar.opened = !state.sidebar.opened
      state.sidebar.withoutAnimation = false
    }

    const size = computed(() => state.size)
    const setSize = (size: Size) => (state.size = size)

    const device = computed(() => state.device)
    const setDevice = (device: string) => {
      state.device = device
    }

    const closeSideBar = (withoutAnimation: boolean) => {
      state.sidebar.opened = false
      state.sidebar.withoutAnimation = withoutAnimation
    }

    return {
      state,
      sidebar,
      toggleSideBar,
      size,
      setSize,
      device,
      setDevice,
      closeSideBar
    }
  },
  {
    persist: {
      storage: window.localStorage,
      pick: ['state.sidebar', 'state.size']
    }
  }
)
